<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>错题页面</title>
    <base th:href="@{/}"/>
<!--    <link rel="stylesheet" href="static/css/minireset.css" />-->
<!--    <link rel="stylesheet" href="static/css/common.css" />-->
<!--    <link rel="stylesheet" href="static/css/cart.css" />-->
<!--    <link rel="stylesheet" href="static/css/bookManger.css" />-->
    <link rel="shortcut icon" href="../static/favicon.ico"/>
    <link href="../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"/>
    <link href="../static/css/font-awesome.css?v=4.4.0" rel="stylesheet"/>
    <link href="../static/css/animate.css" rel="stylesheet"/>
    <link href="../static/css/style.css?v=4.1.0" rel="stylesheet"/>
</head>
<style>
    table{
        width: 70%;
        height: 100%;
        margin: auto;
        font-size: 15px;
    }
</style>
<body>
<h1 class="text-info" style="text-align: center"> 错题页面! </h1>
<div class="list" style="text-align: center">
<!--    <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p>-->
    <button onclick='tableToExcel()'>导出错题</button>
        <table border="1px" cellspacing="5px" >
            <thead>
            <tr>
                <th>题目内容</th>
                <th>你的答案</th>
                <th>正确答案</th>
                <th>做题时间</th>
                <th>第几次做题</th>
            </tr>
            </thead>
            <tbody th:if="${#lists.isEmpty(errorProblemList)}">
            <tr>
                <td colspan="7">您还没有错题！！！</td>
            </tr>
            </tbody>
            <tbody th:unless="${#lists.isEmpty(errorProblemList)}">
            <tr   th:each="errorProblem : ${errorProblemList}">
                <td th:text="${errorProblem.title}" class="asd"></td>
                <td th:text="${errorProblem.answer}" class="asd"></td>
                <td th:text="${errorProblem.rightAnswer}" class="asd"></td>
                <td th:text="${errorProblem.createTime}" class="asd"></td>
                <td th:text="${errorProblem.counts}" class="asd"></td>
                <td>
                    <a th:href="@{/toSingleProblem(title=${errorProblem.title},creatTime=${errorProblem.createTime})}">去做题</a>
                </td>
            </tr>
            </tbody>
        </table>

</div>
</body>
<script>
    const tableToExcel = () => {
        // 要导出的json数据
        var val = document.getElementsByClassName("asd");
        var t = val.length;
        var jsonData1 = [];

        console.log(t)
        for (i=0;i<t;i+=5){
            var temp1 = val[i].innerHTML;
            var temp2 = val[i+1].innerHTML;
            var temp3 = val[i+2].innerHTML;
            var temp4 = val[i+3].innerHTML;
            var temp5 = val[i+4].innerHTML;
            var obj1 = {
                temp1,
                temp2,
               temp3,
                temp4,
               temp5
            };
            // var obj = JSON.stringify(obj1);
            jsonData1.push(obj1);
        }
        console.log(jsonData1)
        console.log(val)
        // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
        let str = `题目内容,你的答案,正确答案,做题时间,第几次做题\n`;
        // 增加\t为了不让表格显示科学计数法或者其他格式
        // var jsonData2 = JSON.parse(jsonData1)
        // console.log(jsonData2)
        for(let i = 0 ; i < jsonData1.length ; i++ ){
            for(const key in jsonData1[i]){
                str+=`${jsonData1[i][key] + '\t'},`;
            }
            str+='\n';
        }
        // encodeURIComponent解决中文乱码
        const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
        // 通过创建a标签实现
        const link = document.createElement("a");
        link.href = uri;
        // 对下载的文件命名
        link.download =  "错题集.csv";
        link.click();
    }
</script>
</html>
